<template>
  <div class="header">
    <h2>杭州校区问卷管理</h2>
    <div style="display:flex;">
      <div v-show="isShow1">
        <a href="javascript:;" class="upload_userinfo" @click="showUnSubmitStudentInfo">未提交学生信息</a>
        <a href="javascript:;" class="upload_userinfo" @click="showDetail">查看详细信息</a>
      </div>
      <div v-show="isShow">
        <a href="javascript:;" class="upload_userinfo" @click="importExcel">上传学员信息</a>
        <input type="file" ref="fileInput" @change="fileChange($event)" style="display:none;">
        <a href="javascript:;" class="logout" @click="logout">退出</a>
      </div>
      <!-- <div class="upload-box" @click="importExcel()">
        <p class="upload-btn">
          <input type="file" ref="fileInput" @change="fileChange($event)" style="display: none">
          <span>{{ excelFileName || '上传学员信息' }}</span>
        </p>
      </div> -->
    </div>
    <!-- <template>
      <span @click="uploadStudents()">上传学员信息</span>
      <div class="upload-box" @click="importExcel()">
        <p class="upload-btn">
          <input type="file" ref="fileInput" @change="fileChange($event)" style="display: none">
          <span>{{ excelFileName || '上传学员信息' }}</span>
        </p>
      </div>
    </template>
    <div class="user">
      <span>{{ username }}</span>
      <span @click="logout()">退出</span>
    </div> -->
      <div class="fixedUnSubmitStudentInfo" v-show="isShow3">
        <h3>查看未提交信息</h3>
        <table width="80%" border="1">
          <tr>
            <th>学生姓名</th>
            <th>学号</th>
          </tr>
          <tbody>
            <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          </tbody>
        </table>
      </div>

      <div class="fixedUnSubmitStudentInfo" v-show="isShow4">
        <h3>查看详细信息</h3>
        <table width="80%" border="1">
          <tr>
            <th>学生姓名</th>
            <th>学号</th>
          </tr>
          <tbody>
            <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          <tr>
            <td>张三</td>
            <td>1111</td>
          </tr>
          </tbody>
        </table>
      </div>
  </div>
</template>


<script>
  import {logout,uploadPaper} from '../api'
  import storage, { TOKEN_KEY }from '../public/js/storage.js'
  export default {
    name: 'Header',
    data() {
      return {
        excelFile: null,
        excelFileName: '',
        isShow:false,
        isShow1:false,
        isShow3:false,
        isShow4:false 
      }
    },
    mounted(){
      // console.log('mounted')
      this.initShow()
    },
    watch:{
      '$route':function(){
        this.initShow()
        this.initShow1()
      }
    },
    methods: {
      showDetail(){
        this.isShow4 = true
        this.isShow3 = false 
      },
      showUnSubmitStudentInfo(){
        this.isShow3 = true
        this.isShow4 = false  
      },
      initShow1(){
        if(this.$route.path == '/data'){
          this.isShow1 = true 
        }else{
          this.isShow1 = false 
        }
      },
      initShow(){
        if(storage.get(TOKEN_KEY)){
          this.isShow = true 
        }
      },
      logout() {
        var isConfirm = confirm('确定要退出吗?');
        if(!isConfirm)return
        logout().then(res=>{
          if(res.code == 0){
            storage.clear()
            this.$router.push('/login')
          }
        })
      },
      importExcel() {
        this.$refs.fileInput.click()
      },

      fileChange(event) {
        let excelFile = event.target.files[0]
        let fileSuffix = excelFile.name.split('.').pop()
        if (fileSuffix !== 'xls' && fileSuffix !== 'xlsx') {
          alert('上传文件格式错误')
        } else{
          // this.excelFile = excelFile
          // this.excelFileName = excelFile.name
          // console.dir(excelFile)
          let params = new FormData()
          params.append('file',excelFile)
          uploadPaper(params).then(res=>{
            if(res.code == 0){
              alert('上传成功')
            }else{
              alert(res.msg);
            }
          })
        }
      },
    }
  }
</script>

<style lang="scss">
  @import "../style/public.scss";

  .header {
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 5rem;
    background-color: $orange;
    color: #fff;
    padding-right:10px;
    h2 {
      margin: 0 5rem 0 6rem;
      font-size: 1.8rem;
      margin-left: 20px;
      /*&:before {
        display: inline-block;
        width: 2rem;
        height: 2rem;
        line-height: 2rem;
        margin-right: .5rem;
        content: "?";
        color: $orange;
        text-align: center;
        background-color: #fff;
        border-radius: 50%;
      }*/
    }

    span {
      margin-right: 50px;
    }
    .upload_userinfo,.logout{
      padding:1rem 3rem;
      color: #000;
      border:1px solid #cce5ff;
      border-radius: 5px;
      background-color: #cce5ff;
      margin:0 10px;
    }
  }
  .fixedUnSubmitStudentInfo{
    position: fixed;
    left:20%;
    top:20%;
    right:20%;
    bottom:20%;
    background-color: pink;
    box-shadow: 0 0 5px #ccc;
    color:#000;
    z-index: 999;
    table{
      margin:30px auto;
    }
  }
</style>
